<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#p1{
				background-color: blue;
			}
			#p2{
				background-color: aqua;
			}
			#p3{
				background-color: blue !important;
			}
			#p4{
				background-color: azure !important;
			}
			p{
				background-color: red !important;
			}
		</style>
	</head>
	<body>
		<!--!important 与优先级无关，但它与最终的结果直接相关，使用一个 !important 规则时，此声明将覆盖任何其他声明。-->
		<p id="p1">aaaaaaaaaaaaaaaaaaaaaaaaa</p>
		<p id="p2">bbbbbbbbbbbbbbbbbbbbbbbbb</p>
		<p>ccccccccccccccccccccccccc</p>
		<!--当两条相互冲突的带有 !important 规则的声明被应用到相同的元素上时，拥有更大优先级的声明将会被采用。-->
		<p id="p3">aaaaaaaaaaaaaaaaaaaaaaaaa</p>
		<p id="p4">bbbbbbbbbbbbbbbbbbbbbbbbb</p>
		<p>ccccccccccccccccccccccccc</p>
	</body>
</html>